<template>
<div class="appManageChild-qy" @click.stop="hide" >
	<div class="content" @click.stop>
		<div class="clearfix">
			<input type="text" value="12312313213" class="fleft"/>
			<div class="fright;" @click.stop="setAppMAnage">+</div>
		</div>
		<div class="appContent">
			<draggable 
		  	v-model="myArray"
			:option="dragOption"
			>
				<transition-group>
					<div 
						class="dra" v-for="element in myArray" 
						:key="element.id"
						
						>
					    <div class="dra-content"></div>
					    <div class="textD">{{element.name}}</div>
					</div>
				</transition-group>
			</draggable>
		</div>
	</div>
</div>
</template> 

<script>
	import draggable from 'vuedraggable'
	export default {
		name:'appManageChild',
		data(){
			return {
				props:{
					l:192
				},
				myArray:[],
				show:false,
				dragOption:{
					disabled:true
				}
			}
		},
		created(){
			for(let i = 0;i < 20;++i){
				this.myArray.push({
					id:i,
					name:i+'',
					template:[]
				});
			}
			this.myArray[2].template.push({
				id:22,
				name:22+'',
			});
			this.myArray[2].template.push({
				id:22,
				name:22+'',
			});
		},
		mounted(){
			$('.appManageChild-qy .content').width('220px');
			$('.appManageChild-qy .content .appContent').height('265px');
			$('.appManageChild-qy .dra-content').height($('.appManageChild-qy .dra-content').width()+'px');
		},
		components:{
			draggable
		},
		methods:{
			hide(){
				this.$emit('hideChild',false);
			},
			setAppMAnage(){
				this.$router.push('/setAppManage');
			}
		}
	}
</script>

<style lang="less">
.appManageChild-qy{
	position: fixed;
	top:0;
	width: 100%;
	height: 100%;
	background: aqua;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	
	.content{
		background: white;
		.appContent{
			overflow: auto;
		}
		.dra{
			width: 33.33333%;
			float: left;
			padding: 5px;
			.dra-content{
				border: 1px solid red;
				margin-bottom: 5px;
				border-radius: 4px;
			}
			.textD{
				text-align: center;
				line-height: 10px;
			}
		}
	}
	
}

</style>